<template>
  <div id='updatePush'>
    <div class="body">
      <div class="card-container">
        <el-row :gutter="10">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-col :span="12" :offset="0">
              <el-form-item label="设备型号" prop="model">
                <span>{{ formatModel(form.modelIds) }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="设备类型" prop="deviceTypeLabel">
                <span>{{ formatType(form.deviceType) }}</span>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12" :offset="0">
            <el-form-item label="设备厂商" prop="facturer">
              <span>{{ form.facturer }}</span>
            </el-form-item>
          </el-col> -->
            <el-col :span="12" :offset="0">
              <el-form-item label="软件版本" prop="version">
                <span>{{ form.version }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24" :offset="0">
              <el-form-item label="版本说明" prop="versionDesc">
                <span>{{ form.versionDesc }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24" :offset="0">
              <div class="terr-title">
                选择设备
              </div>
              <div class="treeBox">
                <tree-transfer filter :from_data='fromData' :to_data='toData' :defaultProps="{ children: 'deviceList' }"
                  :mode="'transfer'" :filterNode="filterMethod" height='450px' openAll>
                </tree-transfer>
                <!-- <el-tree ref="menu" :data="fromData" default-expand-all show-checkbox :props="{ children: 'deviceList' }">
                </el-tree> -->
              </div>
            </el-col>
          </el-form>
        </el-row>
        <div class="footer">
          <el-button @click="submitForm">推 送</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </div>
    </div>



  </div>
</template>

<script>
import { clickPush, getPush, getDeviceMode, pushProject } from '@/api/version/version';
import { getProjectDeviceMap } from '@/api/common.js';
import treeTransfer from 'el-tree-transfer';
export default {
  name: 'updatePush',
  props: {
    row: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: { treeTransfer },
  data() {
    return {
      form: {},
      rules: {},
      fromData: [],
      toData: [],
      firstKey: null,
      pidKeySet: [],
      options: []
    };
  },
  computed: {},
  created() {
    this.getMode()
    // if (process.client){}
  },
  mounted() {
    this.getData();
  },
  beforeCreate() { },
  beforeMount() { },
  methods: {
    formatType(val) {
      switch (val) {
        case '1':
          return '预警终端';
        case '2':
          return '预警喇叭';
        case '1,2':
          return '预警终端、预警喇叭';
        default:
          break;
      }
    },
    formatModel(val) {
      val = val ? val : []
      let modelList = [];
      this.options.filter((item) => {
        val.includes(item.modelId) && modelList.push(item.model);
      });
      return modelList.join();
    },
    filterMethod(query, item) {
      // 判断是不是第一次查询，是的话，将首节点赋值
      //firstKey:缓存首节点key值，为了避免二次搜索时上一次的检索条件还在
      if (!this.firstKey) {
        this.firstKey = item.id;
      }
      // 如果缓存的首节点与目前循环的值相同，说明是一次新的循环
      //pidKeySet:缓存符合条件的节点key值
      if (this.firstKey === item.id) {
        this.pidKeySet = [];
      }
      // 如果含有搜索值则存入pidKeySet
      if (item.label.indexOf(query) > -1) {
        this.pidKeySet.push(item.id);
        return true;
      }
      // 如果搜索到的数据中含有子节点则将其一并显示
      if (this.pidKeySet.find((v) => v === item.pid)) {
        return true;
      }
      // 搜索不到
      return false;
    },
    async getMode() {
      let res = await getDeviceMode();
      if (res.code === 200) {
        this.options = res.data;
      }
    },
    async getData() {
      const res = await getPush(this.row.versionId);
      if (res.code == 200) {
        console.log(res.data, "this.form")
        this.form = res.data;
        this.getProjectData();
      }
    },
    async getProjectData() {
      const res = await getProjectDeviceMap(this.form.modelIds);
      if (res.code == 200) {
        this.fromData = res.data;
      }
    },
    async submitForm() {
      const res = await clickPush({ versionId: this.form.versionId });
      if (res.code == 200) {
        this.toData.forEach(async (item) => {
          // let _data = this.$refs.menu.getCheckedNodes(true, true)
          // console.log(_data, '_data')
          // _data.forEach(async (ele) => {
          //   const res1 = await pushProject({
          //     versionId: this.form.versionId,
          //     versionPushTotalId: res.data,
          //     code: ele.label,
          //     deviceId: ele.id,
          //   });
          //   console.log(res1, 'versionPushTotalId')
          //   if (res1.code == 200) {
          //     this.$emit(
          //       'push',
          //       {
          //         versionId: this.form.versionId,
          //         versionPushTotalId: res.data,
          //         upgradeStatus: ''
          //       },
          //       _data
          //     );
          //   }
          //   this.$emit('cancel');
          // });

          if (item.deviceList) {
            item.deviceList.forEach(async (ele) => {
              const res1 = await pushProject({
                versionId: this.form.versionId,
                versionPushTotalId: res.data,
                code: ele.label,
                deviceId: ele.id,
              });
              if (res1.code == 200) {
                this.$emit(
                  'push',
                  {
                    versionId: this.form.versionId,
                    versionPushTotalId: res.data,
                    upgradeStatus: ''
                  },
                  this.toData
                );
              }
              this.$emit('cancel');
            });
          }
        });
      }
      // this.$emit('push', this.form);

    },


    cancel() {
      this.$emit('cancel');
    },
  },
};
</script>
<style lang='scss' scoped>
#updatePush {
  width: 100%;
  height: 100%;
}

.body {
  width: 100%;
  height: 850px;
  overflow: hidden;
  overflow-y: auto;
  padding: 0 10px;
}

.terr-title {
  height: 50px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: bold;
  line-height: 50px;
  background: rgba(144, 147, 153, 0.2);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  color: #fff;
}

.treeBox {
  border: 1px solid rgba(144, 147, 153, 0.2);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  // padding: 0px 20px 20px 20px;
  padding: 20px;
}

.body::-webkit-scrollbar {
  width: 8px;
  /*height: 4px;*/
}

span {
  color: rgba(255, 255, 255, .6);
}

::v-deep .transfer-title {
  display: none;
}

.body::-webkit-scrollbar-thumb {
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 5px rgba(217, 217, 217, 1);
  background: rgba(0, 0, 0, 0.2);
}

.body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(240, 240, 240, 1);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.1);
}

.footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>